<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="600" height="480"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Helper Functions ---
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';

function drawArrow(context, fromx, fromy, tox, toy) {
    const headlen = 10;
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    context.moveTo(tox, toy);
    context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    context.moveTo(tox, toy);
    context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}

// --- Position Constants ---
const supplyY = 100;
const supplyGap = 80;
const supplyCenterX = 260;
const lampX = 480;
const lampY = supplyY;
const lampRadius = 25;
const resY = 280;
const resStartX = 150;
const resEndX = 450;
const sliderX = 300;
const leftWireX = 100;
const commonNodeY = 320;

// --- Draw Text Labels ---
ctx.fillText("12.0 V", supplyCenterX, supplyY - 30);
ctx.fillText("resistance", 270, resY - 60);
ctx.fillText("wire", 270, resY - 35);
ctx.fillText("sliding", 170, 340);
ctx.fillText("contact", 170, 365);
ctx.font = 'bold 20px Arial';
ctx.fillText("Fig. 8.1 (not to scale)", 300, 450);
ctx.font = '20px Arial';
ctx.fillText("A", resStartX - 20, resY + 8);
ctx.fillText("X", sliderX, resY - 15);
ctx.fillText("B", resEndX + 20, resY + 8);


// --- Draw Components ---

// Power Supply Terminals
ctx.beginPath();
ctx.arc(supplyCenterX - supplyGap/2, supplyY, 6, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(supplyCenterX + supplyGap/2, supplyY, 6, 0, 2*Math.PI);
ctx.stroke();

// Lamp
ctx.beginPath();
ctx.arc(lampX, lampY, lampRadius, 0, 2*Math.PI);
const crossSize = lampRadius / Math.sqrt(2);
ctx.moveTo(lampX - crossSize, lampY - crossSize);
ctx.lineTo(lampX + crossSize, lampY + crossSize);
ctx.moveTo(lampX + crossSize, lampY - crossSize);
ctx.lineTo(lampX - crossSize, lampY + crossSize);
ctx.stroke();

// Resistance Wire (thicker)
ctx.save();
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(resStartX, resY);
ctx.lineTo(resEndX, resY);
ctx.stroke();
ctx.restore();

// Points A & B on the wire
ctx.beginPath();
ctx.arc(resStartX, resY, 5, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(resEndX, resY, 5, 0, 2*Math.PI);
ctx.fill();

// --- Draw Wires ---
ctx.beginPath();
// Left side circuit
ctx.moveTo(supplyCenterX - supplyGap/2, supplyY);
ctx.lineTo(leftWireX, supplyY);
ctx.lineTo(leftWireX, resY);
ctx.lineTo(resStartX, resY);
// Top right circuit
ctx.moveTo(supplyCenterX + supplyGap/2, supplyY);
ctx.lineTo(lampX - lampRadius, supplyY);
// Right side connections
ctx.moveTo(lampX + lampRadius, lampY);
ctx.lineTo(520, lampY);
ctx.lineTo(520, commonNodeY);
ctx.lineTo(resEndX, commonNodeY);
ctx.moveTo(resEndX, resY);
ctx.lineTo(resEndX, commonNodeY);

// Slider connection
ctx.moveTo(sliderX, resY);
ctx.lineTo(sliderX, commonNodeY);
ctx.lineTo(resEndX, commonNodeY);
ctx.stroke();

// --- Draw Arrows and Leader Lines ---
// Arrow for slider
ctx.beginPath();
const arrowBaseY = 330;
ctx.moveTo(sliderX, arrowBaseY);
ctx.lineTo(sliderX, resY);
drawArrow(ctx, sliderX, arrowBaseY, sliderX, resY + 2);
ctx.stroke();

// Leader for "sliding contact"
ctx.beginPath();
ctx.moveTo(230, 350);
ctx.lineTo(sliderX - 5, arrowBaseY);
ctx.stroke();

// Leader for "resistance wire"
ctx.beginPath();
ctx.moveTo(310, resY - 45);
ctx.lineTo(sliderX + 20, resY - 2);
ctx.stroke();

</script>
</body>
</html>